<script setup lang="ts">
import { ref } from 'vue'

interface NavTitleInfo {
  text: string,
  path: string,
}
const navItems = ref<NavTitleInfo[]>([
  { text: '首页', path: '/' },
  { text: '走进圣湖', path: '/comein' },
  { text: '产品中心', path: '/products' },
  { text: '研发实力', path: '/researchDevelopmentStrength' },
  { text: '服务中心', path: '/serviceCentre' },
  { text: '人力资源', path: '/humanResources' },
  { text: '投资者关系', path: '/investorRelations' },
  { text: '联系我们', path: '/contactUs' },
])

const activeIndex= ref<number>(0);
const showSubtitle = (index: number) => {
    console.log(index)
    activeIndex.value = index;
};

const hideSubtitle = () => {
    activeIndex.value = -1;
    console.log(activeIndex.value )
};

const getSubtitles = (index: number):string[] => {
  switch (index) {
    case 0:
      return ['子标题1', '子标题2', '子标题3'];
    default:
      return [];
  }
};
</script>

<template>
  <nav class="sansure-nav">
    <div class="twoPart">
      <img src="@/assets/vue.svg" alt="三诺生物" class="logo nav-leftItem">
      <div class="nav-rightItem">

          <router-link
            v-for="(item, index) in navItems"
            :key="item.path"
            :to="item.path"
            class="nav-item"
            @mouseenter="showSubtitle(index)"
            @mouseleave="hideSubtitle()"
          >
            {{ item.text }}
            <ul class="subtitle_style">
              <li class="subtitle" :class="{subtitle_show: activeIndex === index}">
                <span v-for="(subtitle,subIndex) in getSubtitles(index)" :key="subIndex">
                  {{ subtitle }}
                </span>
              </li>
            </ul>
          </router-link>
      </div>
    </div>

  </nav>
</template>

<style scoped lang="scss">
@use "@/styles/_variables.scss";  // Changed to relative path

$nav-height: 100px;
.sansure-nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: $nav-height;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 9;
  .logo {
    height: 40px;
    //margin-right: 3rem;
    flex-grow: 0;

  }
  .twoPart {
    display: flex;
    flex-grow: 1;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    gap: 5rem;
  }
  .nav-leftItem{
    padding-left: 5rem;
  }
  .nav-rightItem{
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
    .nav-item {
      color: $sansure-normal;
      font-size: 16px;
      transition: color 0.3s;
      min-width: 80px;
      height: $nav-height;
      line-height: $nav-height;
      text-align: center;
      width: 80px;
      position: relative; // 确保伪元素以当前导航项为参考定位
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 0;
        height: 100%;
        background-color: $sansure-select;
        transform: translateX(-50%);
        transition: width 0.3s ease;
        z-index: -1;
      }
      &:hover::before {
        width: 100%;
      }
      &:hover {
        color: white;
      }
      &.router-link-exact-active {
        color: white;
        font-weight: 600;
        background-color: $sansure-select;
      }
    }

    .subtitle-container {
      position: absolute;
      display: flex;
      top: $nav-height;
      justify-content: center;
      left: 0;
      width: 100%;
      background-color: white;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      gap: 1rem;
      padding: 1rem;
    }

    .subtitle {
      line-height: 33px;
      cursor: pointer;
      display: none;
    }

  }
  .nav-items {
    display: flex;
    gap: 2rem;
  }
}
.subtitle_style{
  background-color: transparent;
  list-style: none;
}
.sansure-nav .nav-rightItem .subtitle_show{
  background-color: white;
  color: #1a1a1a;
  display: list-item;
}
</style>